<template>
  <el-card style="margin: 20px; overflow: hidden;height: 660px;">
    <el-form label-width="100px">
      <el-row :gutter="10" style="margin-top: 40px;">
        <el-col :span="12">
          <el-form-item label="使用时间">
            <el-date-picker
                type="datetimerange"
                range-separator="至"
                start-placeholder="下单日期"
                end-placeholder="预计交货日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="times"
            ></el-date-picker>
          </el-form-item>

          <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="12">
              <el-form-item label="总金额">
                <el-input v-model="saveFrom.totalAmount" placeholder="请输入总金额"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购表状态">
                <el-select placeholder="请选择采购表状态" v-model="saveFrom.status">
<!--                  <el-option v-for="item in statusTypeArr"-->
<!--                             :label="item.label" :value="item.value"></el-option>-->
                                <el-option label="待定" value="10"/>
                                <el-option label="确认" value="20"/>
                                <el-option label="已支付" value="30"/>
                                <el-option label="取消" value="40"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="采购原因" style="margin-top: 10px;">
            <el-input
                v-model="saveFrom.reason"
                :autosize="{ minRows: 4, maxRows: 60 }"
                maxlength="50"
                show-word-limit
                type="textarea"
                placeholder="请输入相关信息"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-row :gutter="10">
            <el-col :span="12">

            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <el-button type="primary" @click="submit"
               style="float: right;
               width: 100px;
               margin-top: 260px">提交</el-button>

  </el-card>
</template>

<script setup>
import {ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const saveFrom = ref({
  totalAmount: '',
  status: '',
  reason: ''
});
const times = ref([]);
let userInfo = getUser();
const submit = () => {
  saveFrom.value.userId = userInfo.id;
  saveFrom.value.username = userInfo.username;
  saveFrom.value.phone = userInfo.phone;
  saveFrom.value.email = userInfo.email;
  saveFrom.value.department = userInfo.department;
  saveFrom.value.type = `purchase`;
  saveFrom.value.orderDate = times.value[0];
  saveFrom.value.expectedDeliveryDate = times.value[1];

  saveFrom.value.approver = '假名';

  if (!times.value[0] || !times.value[1]){
    errorInfo('请选择使用时间')
    return
  }
  if (!saveFrom.value.totalAmount){
    errorInfo('请输入总金额')
    return
  }
  if (!saveFrom.value.status){
    errorInfo('请选择采购表状态')
    return
  }
  if (!saveFrom.value.reason){
    errorInfo('请输入申请原因')
    return
  }

  let data = qs.stringify(saveFrom.value);
  axios.post(BASE_URL + '/v1/purchase/save', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('保存成功!');
          clearAll();
          router.push('/applicationList');
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })

}
const clearAll = () => {
  saveFrom.value.reason = '';
  saveFrom.value.totalAmount = '';
  saveFrom.value.status = '';
  times.value = [];
}
</script>

<style scoped>

</style>